import { Outlet } from "react-router-dom";
import Mheader from "@/components/header";
import { useSelector } from "react-redux";
import { ConfigProvider, Layout, theme, Button } from "antd";
import { PrivateRoute } from "@/router";
import MMenu from "./menu";
import { useState } from "react";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import "./index.less";

// darkAlgorithm为暗色主题，defaultAlgorithm为亮色（默认）主题
// 注意这里的theme是来自于Ant Design的，而不是store
const { darkAlgorithm, defaultAlgorithm } = theme;
const { Header, Sider, Content } = Layout;
function Entry() {
  const [collapsed, setCollapsed] = useState(false);
  // const {
  //   token: { colorBgContainer, borderRadiusLG },
  // } = theme.useToken();

  // 获取store中的主题配置
  const globalTheme = useSelector((state: any) => state.theme);

  // Ant Design主题变量
  let antdTheme: {
    algorithm: any;
    token?: any;
  } = {
    // 亮色/暗色配置
    algorithm: globalTheme.dark ? darkAlgorithm : defaultAlgorithm,
  };

  // 应用自定义主题色
  if (globalTheme.colorPrimary) {
    antdTheme.token = {
      colorPrimary: globalTheme.colorPrimary,
      Layout: {
        siderBg: "#000",
        lightSiderBg: "#fff",
      },
      //colorBgContainer:'#f48c8d'
    };
  }

  return (
    <PrivateRoute>
      <ConfigProvider theme={antdTheme}>
        <Layout>
          <Sider
            trigger={null}
            collapsible
             theme={globalTheme.dark?'dark':"light"}
            //theme="light"
            collapsed={collapsed}
          >
            <MMenu />
          </Sider>
          <Layout>
            <Header style={{ padding: 0 }}>
              <Mheader>
                <Button
                  type="text"
                  icon={
                    collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />
                  }
                  onClick={() => setCollapsed(!collapsed)}
                />
              </Mheader>
            </Header>
            <Content
              className="content"
              // style={{
              //   background: colorBgContainer,
              //   borderRadius: borderRadiusLG,
              // }}
            >
              <Outlet />
            </Content>
          </Layout>
        </Layout>
      </ConfigProvider>
    </PrivateRoute>
  );
}

export default Entry;
